import React from 'react';
import s from './style.module.css';
import PropTypes from 'prop-types';

function ForeignLinks({ info }) {
	const locInfo = JSON.parse(JSON.stringify(info));
	delete locInfo.found_at;
	const content = () => {
		return Object.entries(locInfo).map(([type, detail]) => {
			switch (type) {
				case 'keyword':
					return (
						<div>
							<div className={s.title}>违规内容：</div>
							<div className={s.box}>
								{detail.map((e, i) => {
									const str =
										i === detail.length - 1 ? e.risk_rule : e.risk_rule + '、';
									return str;
								})}
							</div>
						</div>
					);
				case 'icp':
					return (
						<div>
							<div className={s.title}>未备案：</div>
							<div className={s.box}>
								{detail.map((e, i) => {
									const str = `域名${e.risk_domain}未备案，可能为不合规网站，请及时处理。`;
									return <p key={i}>{str}</p>;
								})}
							</div>
						</div>
					);
				case 'domain':
					return (
						<div>
							<div className={s.title}>风险域名：</div>
							<div className={s.box}>
								{detail.map((e, i) => {
									return <p key={i}>{e.extra_details}</p>;
								})}
							</div>
						</div>
					);
				case 'black_links':
					return (
						<div>
							<div className={s.title}>暗链：</div>
							<div className={s.tableBox}>
								<table className={s.table}>
									<thead className={s.thead}>
										<tr className={s.head}>
											<td>恶意链接</td>
										</tr>
									</thead>
									<tbody className={s.tbody}>
										{detail.map((e, i) => {
											return e.links.map((item, i) => {
												return (
													<tr className={s.row} key={i}>
														<td>{item}</td>
													</tr>
												);
											});
										})}
									</tbody>
								</table>
							</div>
						</div>
					);
				case 'cryjack':
					return (
						<div>
							<div className={s.title}>挖矿：</div>
							<div className={s.tableBox}>
								<table className={s.table}>
									<thead className={s.thead}>
										<tr className={s.head}>
											<td>关键词</td>
											<td>资源链接</td>
										</tr>
									</thead>
									<tbody className={s.tbody}>
										{detail.map(e => {
											return e.results.map((item, i) => {
												return (
													<tr className={s.row} key={i}>
														<td>{item.pattern}</td>
														<td>{item.src}</td>
													</tr>
												);
											});
										})}
									</tbody>
								</table>
							</div>
						</div>
					);
				default:
					return (
						<div>
							<div className={s.title}>挂马：</div>
							<div className={s.tableBox}>
								<table className={s.table}>
									<thead className={s.thead}>
										<tr className={s.head}>
											<td>特征描述</td>
											<td>类型</td>
											<td>辅助信息</td>
										</tr>
									</thead>
									<tbody className={s.tbody}>
										<tr className={s.row}>
											<td>--</td>
											<td>--</td>
											<td>--</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					);
			}
		});
	};
	React.useEffect(() => {}, [info]);
	return <div className={s.panelBox}>{content()}</div>;
}
ForeignLinks.propTypes = {
	info: PropTypes.any,
};
ForeignLinks.defaultProps = {
	info: {},
};
export default ForeignLinks;
